<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加文章</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__LAYUI__/layui/css/layui.css" media="all">
</head>
<body>
    <div class="layui-form" lay-filter="layuiadmin-form" id="layuiadmin-form" style="padding: 20px 30px 0 0;">
        <input type="hidden" name="id" value="{$data.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" value="{$data.title}" lay-verify="title|required" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">封面</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="cover">上传封面</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1" style="width: 92px; height: 92px;margin: 0 10px 10px 0;"  {if($data['cover'])}src="{$data.cover|pic}{/if}">
                        <p id="demoText"></p>
                        <input type="hidden" name="cover" value="{$data.cover}" id="cover_id">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                {if($data.id)}
                <input type="checkbox" {if($data.status)}checked {/if}  value="{$data.status}" name="status" lay-skin="switch" lay-filter="switchTest" lay-text="启用|禁用">
                {else/}
                <input type="checkbox" checked   value="1" name="status" lay-skin="switch" lay-filter="switchTest" lay-text="启用|禁用">
                {/if}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea id="content" class="layui-textarea layui-hide" name="content" lay-verify="content" >{$data.content}</textarea>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="LAY-submit" id="LAY-submit" value="确认">
        </div>
    </div>
    <script src="__LAYUI__/layui/layui.js"></script>
    <script>
        layui.config({
            base: '__LAYUI__/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form','upload','layedit'], function(){
            var $ = layui.$
                ,form = layui.form
                ,layedit = layui.layedit
                ,upload = layui.upload;
            form.render();
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#cover'
                ,url: '{:url("file/uploadPicture")}'
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code === -1){
                        $('#demoText').html('<span style="color: #FF5722;">'+res.msg+'</span>');
                        return ;
                    }else{
                        $('#cover_id').val(res.id)
                    }
                    //上传成功
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });
            //编辑器上传图片
            layedit.set({
                uploadImage: {
                    url: '{:url("File/uploadPicture")}' //接口url
                    ,type: 'POST' //默认post
                }
            });
            //编辑器
            var index=layedit.build('content');
            //自定义验证规则
            form.verify({
                content: function(){
                    layedit.sync(index);
                },
                title :function (value) {
                    if(value.length < 5 ){
                        return '标题至少得5个字符啊';
                    }
                },
            });
            //监听状态操作
            form.on('switch(switchTest)', function(obj){
                if(obj.elem.checked){
                    this.value = 1;
                }else{
                    this.value = 0
                }
            });
        })
    </script>
</body>
</html>